Prototype - new layout code design idea by SharonStrats · Pull Request #237 · SolidOS/folder-pane

SharonStrats · 2026-08-23T11:51:56Z

Just playing around with the implementation of the new design to see what we should do and so we can discuss and find missing features.

This is not final and may even be thrown away.

This goes along with the same branch in solid-panes.

TODO: a few things but one big one is to add a different view for the container folder pane ui that appears in the main view when you click on a container resource that does not have an index.ttl#this. Thoughts... should we create a storage-pane for the main view of storage and have folder-pane for the view of regular container resources.

Questions/Decisions to make:

Do we want to add in a Home (where all non-public container resources appear under)? or just show the resources we actually have as we do currently...
The + button for upload, thoughts on how it looks.
Should we separate the 2 panes storage and container or keep them both in the folder-pane?
Do we like the sticky headers? And sidebar with the scroll?

timea-solid · 2026-08-26T08:43:30Z

Add some screenshots of how it looks, it will be much faster to check and follow.

Prompt 1: Separate Public container and position it at the end, add a Home above all other resources. Prompt 2: Change the list structure so that the expanded resources can be styled together. Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

SharonStrats · 2026-08-29T11:13:04Z

@timea-solid Here's where I am so far. I have made changes in solid-panes and mashlib as well to make this design. In Mashlib I had to change somethings in order to do the sticky storage header and the sidebar scroll.
All branches are named the same new-layout-playground.

Status
The basic overall structure is there. Some functionality is complete, the bread crumbs, expand and click to open in the main content view area. I left the + icon for file upload only, it appears both in the main sidebar as well as in the container pane.
I still need to complete the resource container pane area, with the different views. The Add button is on the header and the menu items appear, but the add functionality is not working yet. the search does not work. the code is not finalized it's sloppy still, we need to use the file explorer provider and probably create another provider for the storage pane.
In the folder pane there are basically 2 panes within that pane. The main storage pane view showing all resources and a container pane that displays the resources of a non "storage" container in the content view.

… with a provider

…load Prompt: Use the upload functionality from the creation area and make the containers in the sidebar and the container pane droppable. do not allow this for the containers that have an index.ttl resource with a mintclass Note: the code generated is not the code that we should use, it is just for demonstration purposes Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Also needed to add the file explorer provider and header so that the actions menu items to change the pane work.

Prompt/Info: the logic was taken from manager in solid-panes, not sure exactly how we want this to work in the new design. AI was used without too much oversight to get it working displaying the "main" pane and the "internal" pane in the full screen without thesolid-ui-navbar showing, but leaving the main header. Keeping the file explorer header on the "internal" pane. If we are happy with the way it works then we will revisit the code for this. Note: once a resource like a container in shown in the "full" view should it stay on the "full" view when clicking on files inside? Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Inspiration taken from Aad and Redpencil Prompt: Make the creation area have the ability to open the users file explorer when clicked Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Prompt: Add a check for access and create a message for access denied like the empty container, if a user doesn't have access show that message instead of the empty container message. Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

… wherever Prompt: many prompts and work needs to be reviewed did for prototype Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

…@5.0.0-2) (latest: rdflib@2.4.1)

SharonStrats · 2026-09-23T11:18:57Z

@NoelDeMartin here I changed the structure as well because it was depending on the table.

Any check you can give to the web components here, how I have done them and how they work together.

A big question I have here and this is for @timea-solid as well. The new design we basically have sort of 2 panes now for Storage. We have the "Storage" view which is the whole view, but then we have a folder/container view and that needs to appear as a pane. I have included them together here, not sure of this approach should they be separate?

How do you guys feel about the naming? I switched to storage and container .. resources versus files/folders. Wanted to get your thoughts on this.

NoelDeMartin

I also couldn't look at this too in depth, similar to my comments on the solid-panes review. But feel free to ask me about some things in specific if you want more feedback.

NoelDeMartin · 2026-09-24T07:54:15Z

+            ${activeResource && this.browserContext
+              ? html`
+                  <storage-creation-menu
+                    .browserContext=${this.browserContext}


I see we're passing this around in a bunch of props. Instead, we should probably use Lit Context.

NoelDeMartin · 2026-09-24T07:55:17Z

+      <storage-pane-view
+        .browserContext=${this.browserContext}
+      ></storage-pane-view>


Like I mentioned in another PR, components called "provider" should be headless; meaning they just render a <slot> for their children. If this is accomplishing another function, it should be renamed to something else.

NoelDeMartin · 2026-09-24T07:56:09Z

+      return html`
+        <div class="storage-pane-full-view"></div>
+      `
+    }


Is this a bug? If the pane is in fullscreen, it seems like none of its content is rendered.

I select it, maybe not best way... i had some difficulty because of the "pane" in a "pane"

NoelDeMartin · 2026-09-24T07:57:42Z

+          <h1>New ${paneLabel}</h1>
+          <solid-ui-button variant="ghost" @click=${this.cancel} title="Close" aria-label="Close">
+            <icon-lucide-x slot="icon"></icon-lucide-x>
+          </solid-ui-button>


This Dialog in general is fine, but I see we're creating a custom header to tweak some of the styles? I don't think this should be necessary, seeing that this dialog just has a title and a close button. If you provide a title prop on the <solid-ui-dialog>, you should get the same results. And as I said, it's better to avoid customizing Design System components if possible.

NoelDeMartin · 2026-09-24T07:58:17Z

+            <input
+              type="text"
+              placeholder=${placeholder}
+              .value=${this.name}
+              @input=${this.onNameInput}
+            />


This also looks like a custom Input. Why not use the one from the Design System, or update it in case we need different styles?

NoelDeMartin · 2026-09-24T07:58:53Z

+          <!-- the status area here is temporary. it is to hold the status that comes from the panes
+          when a new pane is created. we should actually modify the panes themselves to handle this differently -->
+          <div class="storage-pane-status"></div>
+          <storage-content-view></storage-content-view>


I'm not sure how this is supposed to work, but looking at the code it seems like it doesn't render anything 🤔.

basically in each pane's mint function it can create a "status" area to say it's been created etc.... I put it here so it doesn't look funny right now, but we will need to change each pane to not do this anymore. this text/status had no where to go on screen it was popping up in hte header and distorting things.

Copilot

Copilot review overview

🟡 Changes recommended

Unresolved critical and moderate findings remain, including typecheck, upload/drop, asynchronous rendering, and navigation/state defects.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 4 · 5

Open (9)

Use an array fallback instead of constructing FileList · New
Prevent stale asynchronous renders from replacing current content · New
Annotate mapped values as typed tuples · New
Distinguish internal drags from external URI drops · New
Pass click event and stop propagation for folder creation · New
React to auth changes and guard upload handlers · New
Avoid duplicating the Public breadcrumb · New
Handle errors when expanding sidebar containers · New
Enforce upload restrictions in the shared helper · New

What changed in this PR

This PR prototypes a Lit-based storage browser replacing the legacy folder-pane layout.

Changes:

Adds storage provider, sidebar, header, content, and container components.
Adds resource navigation, search, grid/list views, drag-and-drop, uploads, and creation flows.
Updates styling, build configuration, dependencies, and declarations.

File	Summary
`vite.config.mts`	Enables component decorator processing.
`src/types.ts`	Defines shared storage types.
`src/styles/folderPane.css`	Adds storage shell layout styles.
`src/styles/containerPane.css`	Styles the container pane.
`src/helpers.ts`	Implements resource, search, upload, and rendering helpers.
`src/folderPane.ts`	Mounts the storage provider.
`src/components/storage-resource-sidebar/StorageResourceSidebar.ts`	Implements resource navigation and drag/drop.
`src/components/storage-resource-sidebar/StorageResourceSidebar.styles.css`	Styles the resource sidebar.
`src/components/storage-resource-sidebar/index.ts`	Exports the sidebar.
`src/components/storage-provider/StorageProvider.ts`	Provides storage state and navigation.
`src/components/storage-provider/index.ts`	Exports the provider.
`src/components/storage-provider/context.ts`	Defines storage context contracts.
`src/components/storage-pane-view/StoragePaneView.ts`	Coordinates storage content views.
`src/components/storage-pane-view/StoragePaneView.styles.css`	Defines pane-view styles.
`src/components/storage-pane-view/index.ts`	Exports pane-view components.
`src/components/storage-header/StorageHeader.ts`	Adds breadcrumbs, search, view controls, and creation actions.
`src/components/storage-header/StorageHeader.styles.css`	Styles the storage header.
`src/components/storage-header/index.ts`	Exports the header.
`src/components/storage-creation-menu/StorageCreationMenu.ts`	Implements resource creation actions.
`src/components/storage-creation-menu/StorageCreationMenu.styles.css`	Styles the creation menu.
`src/components/storage-creation-menu/mintPaneInstance.ts`	Creates pane instances.
`src/components/storage-creation-dialog/StorageCreationDialog.ts`	Provides the resource-name dialog.
`src/components/storage-creation-dialog/StorageCreationDialog.styles.css`	Styles the creation dialog.
`src/components/storage-creation-dialog/index.ts`	Exports the dialog.
`src/components/storage-creation-area/StorageCreationArea.ts`	Implements upload and drop interactions.
`src/components/storage-creation-area/StorageCreationArea.styles.css`	Styles the upload area.
`src/components/storage-creation-area/index.ts`	Exports the creation area.
`src/components/storage-content-view/StorageContentView.ts`	Provides the content-view host.
`src/components/storage-content-view/StorageContentView.styles.css`	Styles the content host.
`src/components/storage-content-view/StorageContentView.style.css`	Provides a style placeholder.
`src/components/storage-content-view/index.ts`	Exports the content view.
`src/components/storage-container-pane/StorageContainerPane.ts`	Renders container resources and actions.
`src/components/storage-container-pane/StorageContainerPane.styles.css`	Styles grid, list, and empty states.
`src/components/storage-container-pane/index.ts`	Exports the container pane.
`package.json`	Updates dependencies and build metadata.
`declarations.d.ts`	Adds icon and stylesheet declarations.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+      return
+    }
+
+    const files = input.files ?? new FileList()


+    if (this.renderedSelectionKey !== selectionKey) {
+      this.renderedSelectionKey = selectionKey


+  const resourceMap = Array.from(candidateResources.values())
+    .map(resource => [utils.label(resource).toLowerCase(), resource])
+    .sort()


+  const [uri] = parseDroppedUris(dataTransfer)
+  return uri


+  private handleCreateNewFolder = async () => {
+    event?.stopPropagation()


+  render() {
+    const me = authn.currentUser()
+
+    return html`
+      ${me
+        ? html`


+    if (breadcrumbItems.length > 0) {
+      breadcrumbItems.splice(1, 0, specialCrumb)
+    }


+    if (this.store?.fetcher?.load) {
+      await this.store.fetcher.load(resource.subject)
+    }


+function uploadFilesIntoContainer (
+  store,
+  container: NamedNode,
+  files: FileList | File[],
+  onCreated?: (resource: NamedNode) => void
+) {
+  widgets.uploadFiles(


basic structure of new design

49b82f3

SharonStrats self-assigned this Aug 23, 2026

SharonStrats added the enhancement New feature or request label Aug 23, 2026

SharonStrats added this to SolidOS NLNet UI Aug 23, 2026

SharonStrats moved this to In progress in SolidOS NLNet UI Aug 23, 2026

SharonStrats and others added 4 commits August 27, 2026 07:26

separate main storage view and content view for containers

95faee7

add + and make it work in sidebar and container pane

d083b87

basic header and new menu (not working yet)

1183bb7

SharonStrats and others added 18 commits August 30, 2026 20:43

wired up the pane creation flow

febdb66

basic implementation and styling of the container pane

8677036

consume the store, file explorer context and create a storage context…

0f6447f

… with a provider

implement goback from storage pane

d28fb03

cleanup, overall styling, upload area

edfef51

fix container pane upload

9a9b75d

Add Resource Action Menu to grid and list view in container pane

a325f43

Also needed to add the file explorer provider and header so that the actions menu items to change the pane work.

Implement details for Adding new things

0635c45

Add delete and cleanup

16ed79e

Add delete and cleanup

f2a1874

Add type index discovery options

cfcdab7

create the empty container

02a13da

Click to upload on upload area or empty div

ac17e2a

Inspiration taken from Aad and Redpencil Prompt: Make the creation area have the ability to open the users file explorer when clicked Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

add header to the list view

1374f03

Make all resources drag and droppable to move them around to trash or…

c89b37c

… wherever Prompt: many prompts and work needs to be reviewed did for prototype Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

SharonStrats force-pushed the new-layout-playground branch from 16ed79e to c89b37c Compare September 22, 2026 13:04

SharonStrats and others added 7 commits September 23, 2026 05:48

merge

5a1f4cb

update rdflib version

44bc7ad

merge with latest staging

665bac8

chore: update solidos dependencies (dev: solid-logic@6.0.0-2 solid-ui…

239ee06

…@5.0.0-2) (latest: rdflib@2.4.1)

pull and fix

a872acb

chore: update solidos dependencies (dev: solid-logic@6.0.0-2 solid-ui…

15d90bd

…@5.0.0-2) (latest: rdflib@2.4.1)

update version

8e735f3

SharonStrats force-pushed the new-layout-playground branch from 2f6ac31 to 8e735f3 Compare September 23, 2026 02:39

chore: update solidos dependencies (dev: solid-logic@6.0.0-2 solid-ui…

93685ae

…@5.0.0-2) (latest: rdflib@2.4.1)

SharonStrats requested a review from NoelDeMartin September 23, 2026 11:14

NoelDeMartin reviewed Sep 24, 2026

View reviewed changes

SharonStrats requested a lite review from Copilot September 24, 2026 09:52

Copilot started reviewing on behalf of SharonStrats September 24, 2026 09:52 View session

Copilot AI reviewed Sep 24, 2026

View reviewed changes

Navigation Menu

Prototype - new layout code design idea - #237

Prototype - new layout code design idea#237
SharonStrats wants to merge 31 commits into
stagingfrom
new-layout-playground

SharonStrats commented Aug 23, 2026 •

edited

Loading

Uh oh!

timea-solid commented Aug 26, 2026

Uh oh!

SharonStrats commented Aug 29, 2026 •

edited

Loading

Uh oh!

SharonStrats commented Sep 23, 2026 •

edited

Loading

Uh oh!

NoelDeMartin left a comment

Uh oh!

NoelDeMartin Sep 24, 2026

Uh oh!

NoelDeMartin Sep 24, 2026

Uh oh!

NoelDeMartin Sep 24, 2026

Uh oh!

SharonStrats Sep 24, 2026

Uh oh!

NoelDeMartin Sep 24, 2026

Uh oh!

NoelDeMartin Sep 24, 2026

Uh oh!

NoelDeMartin Sep 24, 2026

Uh oh!

SharonStrats Sep 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		if (this.renderedSelectionKey !== selectionKey) {
		this.renderedSelectionKey = selectionKey

		private handleCreateNewFolder = async () => {
		event?.stopPropagation()

Conversation

SharonStrats commented Aug 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timea-solid commented Aug 26, 2026

Uh oh!

SharonStrats commented Aug 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SharonStrats commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NoelDeMartin left a comment

Choose a reason for hiding this comment

Uh oh!

NoelDeMartin Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

NoelDeMartin Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

NoelDeMartin Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

SharonStrats Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

NoelDeMartin Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

NoelDeMartin Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

NoelDeMartin Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

SharonStrats Sep 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SharonStrats commented Aug 23, 2026 •

edited

Loading

SharonStrats commented Aug 29, 2026 •

edited

Loading

SharonStrats commented Sep 23, 2026 •

edited

Loading

SharonStrats Sep 24, 2026 •

edited

Loading